$orangeColor: rgb(255, 147, 68);
$greyColor: rgb(195, 195, 195);
$blackColor: black;
$fontSize12: 12px;
$fontSize14: 14px;
$fontSize16: 16px;
$fontSize18: 18px;
$myWidth1: 100vw;
$myWidth2: 95vw;

@function footerVw($px) {
    @return $px/1519.5*100vw*2;
}

/* 弹性盒子样式 */
@mixin flex {
    display: flex;
    justify-content: space-between;
}

/* 下拉菜单样式 */
@mixin headerRight {
    width: footerVw(150);
    height: footerVw(70);
    font-size: footerVw(25);
    border: footerVw(4) solid $orangeColor;
    padding: 0 footerVw(10);
    appearance: none;
    background: url("../img/公共img/城市切换下拉.png") no-repeat right center;
    background-size: footerVw(40) footerVw(20);
}

.content {
    margin: 0 auto;
    width: footerVw(750);
    padding-bottom: footerVw(100);
}

/* 顶部相同部分样式 */
.header {
    background: white;
    position: fixed;
    width: footerVw(710);
        margin: 0 footerVw(20);
        padding: footerVw(30) 0;
        @include flex();
        align-items: center;
        .h-left {
            input {
                width: footerVw(150);
                height: footerVw(70);
                font-size: footerVw(30);
                background: none;
                border: footerVw(4) solid $orangeColor;
                border-radius: footerVw(25);
            }
        }
        span {
            font-size: footerVw(30);
            display: inline-block;
            height: footerVw(70);
            line-height: footerVw(70);
        }
}

.subject {
    padding-top: footerVw(150);
    padding-bottom: footerVw(150);
}

/* 底部导航栏样式 */
.footer{
    color: $blackColor;
    width: footerVw(750);
    background: white;
    padding: footerVw(10) 0;
    position: fixed;
    bottom: footerVw(0);
    ul {
        // background: aquamarine;
        width: footerVw(710);
        margin: footerVw(17) footerVw(20);
        display: flex;
        justify-content:  space-between;
        text-align: center;
        li {
            position: relative;
            overflow: hidden;
            &:hover img {
                transform: translateY(footerVw(-72));
                filter: drop-shadow($orangeColor 0 footerVw(72));
            }
            &:hover img:nth-of-type(2),
            &:hover img:nth-of-type(3) {
                transform: translateY(footerVw(-72));
                filter: drop-shadow(white 0 footerVw(72));
            }
            img {
                width: footerVw(72);
                height: footerVw(72);
            }
            span {
                display: block;
                font-size: footerVw(25);
                text-align: center;
            }
        }
        li:nth-of-type(3) img:nth-of-type(2) {
            width: footerVw(22);
            height: footerVw(22);
            position: absolute;
            left: footerVw(28);
            top: footerVw(21);
        }
        li:nth-of-type(3) img:nth-of-type(3) {
            width: footerVw(22);
            height: footerVw(22);
            position: absolute;
            left: footerVw(21);
            top: footerVw(28);
        }
    }
}